Load libaries

These are the libraries I’m using today:

library(tidyverse)
library(sf)
library(leaflet)
library(htmltools)
library(htmlwidgets)

Read in data

First, I’ll download a set of polygons representing all the parks in Seattle. I’ll add a field to indicate the area of each park in acres (st_area() calculates the area in square meters, and there are 4046.86 square meters in an acre). One of the parks has an NA value for its name, so I’ll replace that name with “unnamed”.

parks <- st_read("https://data.seattle.gov/api/geospatial/ptpk-refv?method=export&format=GeoJSON") %>%
  mutate(acres = as.numeric(st_area(geometry)) / 4046.86) %>%
  mutate(name = ifelse(is.na(name), "unnamed", name))

Displaying polygons on a Leaflet map

Now I’ll draw the park polygons on a leaflet map so you can pan around and zoom in on the parts of Seattle where you want to see the parks in more detail.

addProviderTiles() adds an basemap to your leaflet object, and you can choose among many alternative basemap styles.

addPolygons() adds my park polygons to the leaflet map. fillColor = "green" shades the polygons green and stroke = FALSE prevents R from drawing an outline around the polygons.

I’m also using addControl to add a title to the top right corner of my map and link to the data source in the bottom left corner.

I can display the map within my Rmarkdown file by typing the name of the leaflet object I just created.

parks_map1 <- leaflet(parks) %>%
  addProviderTiles(providers$Stamen.TonerLite) %>%
  addPolygons(fillColor = "green", stroke = FALSE) %>%
  addControl("Park Locations in Seattle", position = "topright") %>%
  addControl('<a href="https://data.seattle.gov/Parks-and-Recreation/Seattle-Parks-and-Recreation-GIS-Map-Layer-Shapefi/ptpk-refv">Data source</a>',
             position = "bottomleft")

parks_map1

More interactivity: highlighting

I can add highlightOptions to the addPolygons() function to change the color and opacity of a park when I hover my cursor over it.

I’ll use a different basemap this time, just so you can see what it looks like.

parks_map2 <- leaflet(parks) %>%
  addProviderTiles(providers$CartoDB) %>%
  addPolygons(fillColor = "green", stroke = FALSE,
              highlightOptions = highlightOptions(fillColor = "darkgreen", 
                                                  fillOpacity = 1)) %>%
  addControl("Park Locations in Seattle", position = "topright") %>%
  addControl('<a href="https://data.seattle.gov/Parks-and-Recreation/Seattle-Parks-and-Recreation-GIS-Map-Layer-Shapefi/ptpk-refv">Data source</a>',
             position = "bottomleft")

parks_map2

More interactivity: Labels

I can also create a label that shows the name of the park and its size in acres. I can set the label value in addPolygons() so that the label will display when I hover over the map.

I’ll also try out a different basemap here. This one is a little confusing because it includes some green areas that aren’t actually part of our parks dataset.

parks$describe <- 
  paste(parks$name, "<br>", 
               prettyNum(parks$acres, digits = 2), " acres") %>% 
  lapply(htmltools::HTML)

parks_map3 <- leaflet(parks) %>%
  addProviderTiles(providers$CartoDB.Voyager) %>%
  addPolygons(fillColor = "green", stroke = FALSE,
              highlightOptions = highlightOptions(fillColor = "darkgreen", 
                                                  fillOpacity = 1),
              label = ~describe) %>%
  addControl("Park Locations in Seattle", position = "topright") %>%
  addControl('<a href="https://data.seattle.gov/Parks-and-Recreation/Seattle-Parks-and-Recreation-GIS-Map-Layer-Shapefi/ptpk-refv">Data source</a>',
             position = "bottomleft")

parks_map3

More interactivity: Pop-ups

I might want the label to only appear when I click on a polygon, rather than when I just hover over it. In that case, I’ll use popup rather than label.

I’ll also try out a different basemap here. There’s the same issue as the previous map where it’s hard to differentiate between the green polygons and the green areas of the basemap.

parks_map4 <- leaflet(parks) %>%
  addProviderTiles(providers$Stamen.Watercolor) %>%
  addPolygons(fillColor = "green", stroke = FALSE,
              highlightOptions = highlightOptions(fillColor = "darkgreen", 
                                                  fillOpacity = 1),
              popup = ~describe) %>%
  addControl("Park Locations in Seattle", position = "topright") %>%
  addControl('<a href="https://data.seattle.gov/Parks-and-Recreation/Seattle-Parks-and-Recreation-GIS-Map-Layer-Shapefi/ptpk-refv">Data source</a>',
             position = "bottomleft")

parks_map4

Displaying points on a Leaflet map

Maybe the data I want to show are points rather than polygons. To demonstrate this, I’ll just create a set of points from the park centroids.

park_pts <- st_centroid(parks)

Points as markers

I’ll start by showing the points as markers. It looks pretty messy unless you zoom in.

parks_map5 <- leaflet(park_pts) %>%
  addProviderTiles(providers$OpenStreetMap) %>%
  addMarkers(popup = ~describe) %>%
  addControl("Park Locations in Seattle", position = "topright") %>%
  addControl('<a href="https://data.seattle.gov/Parks-and-Recreation/Seattle-Parks-and-Recreation-GIS-Map-Layer-Shapefi/ptpk-refv">Data source</a>',
             position = "bottomleft")

parks_map5

Points as circles

It might look cleaner to show the points as little circles.

parks_map6 <- leaflet(park_pts) %>%
  addProviderTiles(providers$Stamen) %>%
  addCircles(fillColor = "green", color = "green", 
             stroke = FALSE, radius = 200,
              highlightOptions = highlightOptions(fillColor = "darkgreen", 
                                                  fillOpacity = 1),
              popup = ~describe) %>%
  addControl("Park Locations in Seattle", position = "topright") %>%
  addControl('<a href="https://data.seattle.gov/Parks-and-Recreation/Seattle-Parks-and-Recreation-GIS-Map-Layer-Shapefi/ptpk-refv">Data source</a>',
             position = "bottomleft")

parks_map6

Points as circles of varying sizes

I can also vary the sizes of the circles based on the area of the park.

parks_map7 <- leaflet(park_pts) %>%
  addProviderTiles(providers$Stamen) %>%
  addCircles(fillColor = "green", color = "green", 
             stroke = FALSE, radius = ~acres,
              highlightOptions = highlightOptions(fillColor = "darkgreen", 
                                                  fillOpacity = 1),
              popup = ~describe) %>%
  addControl("Park Locations in Seattle", position = "topright") %>%
  addControl('<a href="https://data.seattle.gov/Parks-and-Recreation/Seattle-Parks-and-Recreation-GIS-Map-Layer-Shapefi/ptpk-refv">Data source</a>',
             position = "bottomleft")

parks_map7

Saving a separate html file

I can use the saveWidget() function to save any of my leaflet maps as in its own html file. You can view the file you save my opening it in your web browser. Once you’ve pushed the file to GitHub, you’ll be able to see it on the internet the same way you see any of your assignment html files. You can see the one I created below here: https://vis-2129-f2020.github.io/tutorials/parks

saveWidget(parks_map7, file = "parks.html")